<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' style="padding-top:20px" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right"
                 label-width="100px">
          <!--<el-form-item label="主键：">
            <el-input v-model="searchFilters.id" placeholder="请输入主键"></el-input>
          </el-form-item>
          <el-form-item label="部门ID：">
            <el-input v-model="searchFilters.deptId" placeholder="请输入部门ID"></el-input>
          </el-form-item>-->
      <!--    <el-form-item label="部门编号：" prop="bdCode">
            <el-select clearable placeholder="选择部门" v-model="searchFilters.bdCode">
              <el-option v-for="(item,index) in deptList" :key="index" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="供应商编码：" prop="supplierCode">
            <el-select clearable placeholder="选择供应商"v-model="searchFilters.supplierCode">
              <el-option v-for="(item,index) in platformList" :key="index" :label="item.code"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="活动规则编码">
            <el-input v-model="searchFilters.activityRuleCode" placeholder="请输入活动规则编码"></el-input>
          </el-form-item>-->
         <!-- <el-form-item label="会员编码">
            <el-input v-model="searchFilters.memberCode" placeholder="请输入会员编码"></el-input>
          </el-form-item>
          <el-form-item label="供应商编码：">
            <el-input v-model="searchFilters.supplierCode" placeholder="请输入供应商编码"></el-input>
          </el-form-item>-->
          <el-form-item label="积分类型">
            <el-select v-model="searchFilters.pointType" clearable placeholder="选择类型">
              <el-option label="交易积分" :value="1"></el-option>
              <el-option label="交互积分" :value="2"></el-option>
              <el-option label="现金积分" :value="3"></el-option>
              <el-option label="定向积分" :value="4"></el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="发放类型">
            <el-select v-model="searchFilters.deliveryType" clearable placeholder="选择类型">
              <el-option label="积分卡" :value="1"></el-option>
              <el-option label="其他" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">

            <el-select v-model="searchFilters.type" clearable placeholder="选择类型">
              <el-option label="新增" :value="1"></el-option>
              <el-option label="减少" :value="2"></el-option>
              <el-option label="冻结" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="供应商名称：" prop="name" width="100%">
            <el-input v-model="searchFilters.name" auto-complete="off"></el-input>
          </el-form-item>
         <!-- <el-form-item label="数量：">
            <el-input v-model="searchFilters.amount" placeholder="请输入数量"></el-input>
          </el-form-item>
          <el-form-item label="描述：">
            <el-input v-model="searchFilters.description" placeholder="请输入描述"></el-input>
          </el-form-item>-->
          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <div class="left-area">
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
              </el-button-group>
            </div>
          </div>
          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table :height="350"
                       :operationWidth=300
                       :tableList="tableList"
                       :tableHeaderList="tableHeaderList"
                       :totalSize="totalSize"
                       :showDetailOperation=true
                       :showEditOperation=false
                       :showBatchDelete=false
                       :showSelection=false
                       :showIndex=false
                       :showDeleteOperation=false
                       @findPage="findPage"
                       @handleDetail="handleDetail"
                       @handleDelete="handleDelete"
                       @handleEdit="handleEdit"
                       @handleSizeChange="handleSizeChange"
                       @handlePageChange="handlePageChange"
                       ref="jicTable"></jic-table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  //一.导包区
  import jicTable from '@/components/jicComponentGallery/jicTable';

  //二.数据输出区
  export default {

    //===== 注册组件 =====
    components: {
      jicTable,
    },

    //===== 数据初始化区=====
    data() {
      return {

        //===== 公共数据初始化 =====
        pageIndex: 0, //当前页数：首页；
        pageSize: 10, //每页记录数：10条记录；
        totalSize: 0, //总记录数：返回数据总条数
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        }, // 请求数据的参数
        tableList: [], // 表格列表数据
        searchSize: 'mini',
        platformList: [],
        deptList: [],
        //=====表格表头数据=====
        tableHeaderList: [{
          prop: "name",
          label: "供应商名称",
          minWidth: 100,
          formatter: null
        },

          {
            prop: "platformCode",
            label: "平台编码",
            minWidth: 100,
            formatter: null
          },

          {
            prop: "memberCode",
            label: "会员编码",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "supplierCode",
            label: "供应商编码",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "pointType",
            label: "积分类型",
            minWidth: 100,
            formatter: function (row, column, sts, index) {
              if (sts === 1) {
                return "交易积分";
              } else if (sts === 2) {
                return "交互积分";
              } else if (sts === 3) {
                return "现金积分";
              }else if(sts === 4){
                return "定向积分"
              }
            }
          },
          {
            prop: "deliveryType",
            label: "发放类型",
            minWidth: 100,
            formatter: function (row, column, sts, index) {
              if (sts === 1) {
                return "积分卡";
              } else if (sts === 2) {
                return "其他";
              } 
            }
          },
          {
            prop: "type",
            label: "类型",
            minWidth: 100,
            formatter: function (row, column, sts, index) {
              if (sts === 1) {
                return "新增";
              } else if (sts === 2) {
                return "减少";
              } else if (sts === 3) {
                return "冻结";
              }
            }
          },
          {
            prop: "amount",
            label: "数量",
            minWidth: 100,
            formatter: null
          },
          {
            prop: "description",
            label: "描述",
            minWidth: 100,
            formatter: null
          },
        ],

        //=====搜索表单对应的数据对象初始化=====
        searchFilters: {
          id: null,
          deptId: null,
          name:null,
          bdCode: null,
          platformCode: null,
          activityRuleCode: null,
          memberCode: null,
          supplierCode: null,
          pointType: null,
          deliveryType: null,
          createTime: null,
          updateTime: null,
          creator: null,
          updater: null,
          deleteFlag: null,
          type: null,
          amount: null,
          description: null,
        },
        //dialogVisible: false, //// 是否显示弹窗内容;
        //editDialogVisible1: false,//// 是否可编辑弹窗内容;
        //editLoading: false,////是否显示加载时动画效果;
      }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
      this.findPage();
      this.getDeptName();
      this.getSettSupplierName();
    },

    //=====Vue.js 方法区=====
    methods: {

      //1.查询按钮：查询列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters === undefined || this_.searchFilters === null) {
          this_.searchFilters = {};
        }

        this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
        this_.searchFilters.pageSize = this.pageRequest.pageSize;
        this.utils.request.findSettSupplierLogPage(this_.searchFilters, function (res) {
          if (res.code === "0000") {
            this_.tableList = res.data.list;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.tableList = [];
            this_.totalSize = 0;
          }
        });
      },

      // 2.重置按钮：无条件查询搜索框条件
      resetForm(formName) {
        this.searchFilters = {};
        this.findPage(null);
      },

      // 3.详情按钮对应的方法
      handleDetail(params) {
        this.$router.push({
          path: "/SettSupplierLogDetail/",
          query: {
            id: params.row.id,
            disabled: true
          }
        });
      },
      getDeptName() {
        let this_ = this
        //let param = this.dataForm;
        this.utils.request.DepartmentNameInquiry({}, function (res) {
          this_.deptList = res.data
          console.log(this_.deptList)
        });
      },

      getSettSupplierName() {
        let this_ = this
        // let param = this.dataForm;
        this.utils.request.getSettSupplierName({}, function (res) {
          this_.platformList = res.data;
        });
      },

      // 4.编辑按钮对应的方法
      handleEdit(params) {
        this.$router.push({
          path: "/SettSupplierLogDetail/",
          query: {
            id: params.row.id,
            disabled: false
          }
        });
      },

      // 5.跳转到新增记录页面；
      addForm(params) {
        params = {
          row: {
            id: null
          }
        };
        this.$router.push({
          path: "/SettSupplierLogDetail/",
          query: {
            id: params.row.id,
            disabled: false
          }
        });
      },
      // 6.每页记录数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
      },

      // 7.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
      // 8.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

      // 9.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

      // 10.删除按钮：删除选中的记录
      handleDelete(data) {
        this.utils.request.deleteSettSupplierLog({
          id: data.row.id
        }, res => {
          if (res.data) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.findPage();
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            });
          }
        });
      }
      //==========Vue.js自定义方法区==========

    },
  }
</script>

<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
